jQuery学习

前置知识

什么是 jQuery

参考资料 jQuery

jQuery 是一个 JavaScript 库；其极大地简化了 JavaScript 编程。

例如曾经操作 DOM 节点时需要手写一串代码

let dl = document.getElementById('t1');

而使用了 jQuery 之后可以直接使用 CSS 那样的选择器直接取得

let dl = $("#t1")

当然上面只是 jQuery 的一个用途

配置环境

其实只需要引入一个远程的包就好了

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.0/jquery.min.js"></script>

语法

因为 jQuery 本身就是封装的原生 JavaScript，所以实际上 jQuery 的所有操作都是在调用这个 jQuery 对象，但是每次调用这个 jQuery 的方法都需要写一个名称太麻烦了，所以通过标识符 $ 来代指 jQuery 对象

jQuery 只需传入一个回调函数就能执行了

// 例如
$(function(){
  $("#btn1").click(function(){
      alert("点击了按钮")
  });
});

选择器

语法

$(selector).action()

//css中的选择器它全都能用
$('p').click(); //标签选择器
$('#id').click(); //id选择器
$('.class').click(); //class选择器

追加元素

参考自文档--append(content|fn) 参考自文档--appendTo(content)

append

向每个匹配的元素内部追加内容。

这个操作与对指定的元素执行appendChild方法，将它们添加到文档中的情况类似。

$("p").append("<b>Hello</b>");

appendTo

把所有匹配的元素追加到另一个指定的元素元素集合中。实际上，使用这个方法是颠倒了常规的 $(A).append(B) 的操作，即不是把B追加到A中，而是把A追加到B中。

<p>I would like to say: </p>
<div></div><div></div>

$("p").appendTo("div");

结果

<div><p>I would like to say: </p></div>
<div><p>I would like to say: </p></div>

获取input值

$(" #test ").val()
$(" input[ name='test' ] ").val()
$(" input[ type='text' ] ").val()
$(" input[ type='text' ]").attr("value")

事件Event

鼠标事件 mouse
键盘事件
其他事件

<!--获取鼠标当前坐标-->
<span id="coordinate"></span>
<div id="divMove" style="width: 500px;height: 500px;background: coral">
    在这移动鼠标
</div>


<script>
    //当网页元素加载完毕后响应事件(总之就是等页面加载完才执行)
    // $(document).ready(function () {
    //
    // })

    //上面的写法太长了，所以简化成
    $(function () {
        $('#divMove').mousemove(function (e) {
            //注意这个 text() 有个重载，如果没有设置值 则是获得值
            $('#coordinate').text('x:'+e.pageX+' y:'+e.pageY);
        })
    })

</script>

更多事件参考这里

选择器

js选择器

之前的js在没有引入jQuery之前都是手写查找器的方式来查询HTML的页面元素如下：

按ID查找：

var a = document.getElementById("dom-id");

按tag查找(就是标签)：

var divs = document.getElementByTagName("div");

查找子tag（例如查找<table class='green'>里面所有的<tr>）

var table = document.getElementByTagName("table");
for(var i=0;i<table.children;i++){
  // 过滤出<tr>...
}

jQuery选择器

jQuery的选择器类似于css的选择器

类别	CSS选择器	jQuery选择器
ID选择器	#myID	$("#myID")
类选择器	.myClass	$(".myClass")
标签选择器	p	$("p")
层次选择器	div > strong	$("div>strong")
css称为伪类选择器 jQuery称之为过滤选择器	p:nth-child(3)	$("p:nth-child(3)")

例子如下：

选择器

按ID找：var div = $('#abc') 查找<div id="abc">
按tag找：var ps = $('p') 返回所有<p>标签（ps.length 可以返回有多少个<p>标签）
按class找：var a = $('.red') 所有节点包含class="red"都将返回

按属性查找：

//找出属性 name='email'的
var email = $['[name=email]']; 

层级选择器

还是和css的一样

<div class='爷'>
  <ul class='爸'>
    <li class='子1'></li>
  </ul>
</div>
// 选出子
$(.爸 .子1)

更多操作方式看--jQuery选择器

jQuery对象

选择器返回的对象是jQuery对象（类似于数组：例如：var div = $('#abc') 的结果是：[<div id="abc"></div>,<div id="abc"></div>,....],如果不存在这个id="abc"则返回[]即空数组）

jQuery对象和Dom对象之间可以相互转换

var div = $('#abc');
// 假设存在div，获取第一个dom元素
var divDom = div.get(0);
// 重新把Dom包装为jQuery对象
var another = $(divDom)

应用

$(function(){
  var btn = $("#btn");
  bth.click(function(){
    alert("点击了按钮")
  });
})

常用事件方法

更多---事件方法

jQuery 事件方法事件方法会触发匹配元素的事件，或将函数绑定到所有匹配元素的某个事件。

click() 方法

$("button").click(function(){
  $("p").slideToggle();
});

定义和用法当点击元素时，会发生 click 事件。当鼠标指针停留在元素上方，然后按下并松开鼠标左键时，就会发生一次 click。 click() 方法触发 click 事件，或规定当发生 click 事件时运行的函数。
将函数绑定到 click 事件
```
$(selector).click(function)
```

Ajax 异步请求

$.ajax({
  url:'hello/testajax', //请求的地址
  type:'post',
  data:'id='+数据, //在servlet就可以通过 req.getParameter('id')来取得
  dataType:'json',
  //处理以前需要做的功能 
  beforeSubmit : function() {
    $("tipMsg").text("数据正在保存，请稍候..."); 
    $("#insertBtn").attr("disabled", true); 
   },
  //请求成功的回调函数，
  success:function(data){
      console.log(data);
      let names = '';
      let details = '';
      // 解析数组,注意这里有个坑，必须给let i = 0声明初始值
      for(let i = 0; i < data.length;i++){
          names += "<h4>书名：" + data[i].bookName + "</h4>";
          details += "<h4>介绍：" + data[i].detail + "</h4>";
      }
      $('#book-name').append(names);
      $('#book-detail').append(details);
  },
  //请求失败，包含具体的错误信息
  error : function(e){
      console.log(e.status);
      console.log(e.responseText);
  }
})

在java里通过Response响应请求

@Override
protected void doGet(HttpServletRequest req, HttpServletResponse resp) throws ServletException, IOException
{
    // TODO 自动生成的方法存根
    List<TestUser> list = new ArrayList<TestUser>();
    list.add(new TestUser("小明", 16));
    list.add(new TestUser("小h", 19));
    list.add(new TestUser("小a", 13));
    list.add(new TestUser("小b", 12));
    list.add(new TestUser("小c", 16));
    list.add(new TestUser("小d", 17));
    Gson gson = new Gson();
    String str = gson.toJson(list);
    System.out.println(str);
    //别忘了编码问题
    resp.setCharacterEncoding("UTF-8");
    resp.getWriter().write(str);
}

前置知识​

什么是 jQuery​

配置环境​

语法​

选择器​

追加元素​

获取input值​

事件Event​

选择器​

js选择器​

jQuery选择器​

jQuery对象​

应用​

常用事件方法​

click() 方法​

Ajax 异步请求​